<template>
  <div>
    <CustomDialog
        :title="state.dialog.title"
        v-model:visible="state.dialog.isShowDialog"
        dialogWidth="900px"
        @close="closeDialog"
        :dialogFooterBtn="true"
    >

      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="flex-center sd-flex-center">
            <div class="preview-title">
              此为预览效果，实际效果请扫码查看
            </div>
            <div class="web-preview" v-if="state.dialog.isShowDialog">
              <iframe id="preview" frameborder="1" height="600px" ref="iframeRef"></iframe>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <div class="flex-center sd-flex-center">
            <div class="title">
              各端二维码
            </div>
            <div class="flex-center sd-flex-center code-preview" v-for="(info,index) in state.ruleForm" :key="index">
              <div style="width: 100px; height: 120px">
                <el-image :src="STATIC_URL + info.preview"/>
              </div>
              <div class="preview-title">
                <span v-if="info.type == 0">微信扫描二维码即可预览</span>
                <span v-if="info.type == 1">微信扫描小程序即可预览</span>
              </div>
            </div>

          </div>
        </el-col>

      </el-row>

    </CustomDialog>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {decorationApi} from '/@/api/shop/decoration';
import messageUtils from "/@/utils/messageUtils";
import {STATIC_URL} from '/@/utils/config';


const state = reactive({
  ruleForm: [],
  url: '',
  dialog: {
    isShowDialog: false,
    type: '',
    title: '装修预览',
    submitTxt: '',
  },
});


const iframeRef = ref()
const closeDialog = () => {
  console.log('关闭窗口');
  state.dialog.isShowDialog = false;
  state.url = ''
};

const openDialog = async (id: string) => {
  state.dialog.isShowDialog = true;
  try {
    const {data} = await decorationApi().viewPreview(id);
    state.ruleForm = data
    state.url = data[0].url;
    iframeRef.value.src = state.url;
  } catch (e) {
    messageUtils().error('操作失败');
  }
};

defineExpose({openDialog});
</script>


<style scoped lang="scss">
.preview-title {
  color: var(--sd-subtitle);
  margin-bottom: 12px;
}

.web-preview {
  width: 300px;
  height: 594px;
  background: url('../../../assets/decoration/preview_bg.png');
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #434343;
}

.web-preview #preview {
  border: none;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border-radius: 26px;
}

.title {
  font-size: 18px;
  color: var(--sd-title);
  margin-bottom: 12px;
}

.code-preview {
  margin-top: 10px;
}
</style>